<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>幻灯片切换广告</title>
<link href="css/style-slider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/player.js"></script>
<script type="text/javascript" src="js/playerslider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	// 焦点图片水平滚动
	$("#slider1").Xslider({
		// 默认配置
		affect: 'scrollx', //效果  有scrollx|scrolly|fade|none
		speed: 800, //动画速度
		space: 6000, //时间间隔
		auto: true, //自动滚动
		trigger: 'mouseover', //触发事件 注意用mouseover代替hover
		conbox: '.conbox', //内容容器id或class
		ctag: 'div', //内容标签 默认为<a>
		switcher: '.switcher', //切换触发器id或class
		stag: 'a', //切换器标签 默认为a
		current:'cur', //当前切换器样式名称
		rand:false //是否随机指定默认幻灯图片
	});
	// 焦点图片垂直滚动
	$("#slider2").Xslider({
		affect:'scrolly',
		ctag: 'div',
		speed:400
	});
	// 焦点图片淡隐淡现
	$("#slider3").Xslider({
		affect:'fade',
		ctag: 'div'
	});
	// 选项卡
	$("#slider4").Xslider({
		affect:'none',
		ctag: 'div',
		speed:10
	});
});
</script>
</head>
<body>
<div class="main">
  <div class="matter1">
     <div class="left">
        <div id="slider3" class="slider">
		   <div class="conbox">
			  <div><a href="#" title=""><img src="images/reading1.jpg" width="620" height="300"/></a></div>
			  <div><a href="#" title=""><img src="images/reading2.jpg" width="620" height="300"/></a></div>
			  <div><a href="#" title=""><img src="images/reading3.jpg" width="620" height="300"/></a></div>
			  <div><a href="#" title=""><img src="images/reading4.jpg" width="620" height="300"/></a></div>
			  <div><a href="#" title=""><img src="images/reading5.jpg" width="620" height="300"/></a></div>
		   </div>
		   <div class="switcher">
			  <a href="#" class="cur">1</a>
			  <a href="#">2</a>
			  <a href="#">3</a>
			  <a href="#">4</a>
			  <a href="#">5</a>
		   </div>
        </div>
    </div>
  </div>
</div>
</body>
</html>
